<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script>
    let App={
        template:`
            <div>
                上传进度：{{rate}}%
                发送文件：<input type='file' name='file' @change='changeFile'/>
                <button @click='sendAjax'>发送请求</button>
                <button @click='cancel'>取消请求</button>
                <button @click='resume'>继续传递</button>
            </div>
        `,
        data(){
            return {
                file:{},
                rate:0,
                source:{},
                loaded:0
            }
        },
        created(){
            // 可以吧  内部的onUploadProgress选项拉出来写在公共的方法里
            this.$axios.defaults.onUploadProgress=(progressEvent)=>{//上传过程的进程事件
                        this.loaded = progressEvent.loaded;  //记录上传进度，为下次续传准备
                        console.log(progressEvent.loaded);  //当前上传的字节数
                        console.log(progressEvent.total);   //总文件的大小
                        this.rate=(progressEvent.loaded/progressEvent.total)*100;
                    }
        },
        methods:{
            sendAjax(){
                let CancelToken = this.$axios.CancelToken;
                let source = CancelToken.source();
                // 保存需要取消的对象 
                this.source = source;
                let fd = new FormData();
                fd.append('file',this.file);    //可以接收第三个参数   文件名  作用：知道当前上传的是哪个文件完成续传的操作
                this.$axios.post('/add', fd , {
                    cancelToken:source.token,            //携带要取消的标示
                    onUploadProgress:(progressEvent)=>{//上传过程的进程事件
                        this.loaded = progressEvent.loaded;  //记录上传进度，为下次续传准备
                        console.log(progressEvent.loaded);  //当前上传的字节数
                        console.log(progressEvent.total);   //总文件的大小
                        this.rate=(progressEvent.loaded/progressEvent.total)*100;
                    }
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            cancel(){
                this.source.cancel()
            },
            changeFile(e){
                console.log(e.target);              //获取DOM对象
                console.log(e.target.files[0])      //获取文件对象
                this.file = e.target.files[0];
            },
            resume(){
                // 裁剪文件 (起始位置，结束位置)
                let fileData = this.file.slice(this.loaded+1,this.file.size);

                let fd = new FormData();
                fd.append('file',fileData);
                // 续传以后再取消
                let CancelToken = this.$axios.CancelToken;
                let source = CancelToken.source();
                // 保存需要取消的对象 
                this.source = source;
                this.$axios.post('/add', fd , {
                    cancelToken:source.token,            //携带要取消的标示
                    onUploadProgress:(progressEvent)=>{//上传过程的进程事件
                        this.loaded = progressEvent.loaded;  //记录上传进度，为下次续传准备
                        console.log(progressEvent.loaded);  //当前上传的字节数
                        console.log(progressEvent.total);   //总文件的大小
                        this.rate=(progressEvent.loaded/progressEvent.total)*100;
                    }
                })
            }
        }
    }
    // 组件内的每一个this对象，都是Vue的孩子
    // Vue祖宗的原型数据，就会共享给所有的孩子

    Vue.prototype.$axios=axios;

    new Vue({
        el:'#app',
        components:{
            App
        },
        template:"<app/>"
    })


</script>
</html>